<!--  -->
<template>
  <div class="songListPage" v-loading="isLoading"
   element-loading-text="加载中..."
   >
    <!-- 歌单细节 -->
    <ListDetail :playList="playList" :songsDetail='songsDetail' :creator="creator"></ListDetail>

    <!-- 导航栏 -->
    <MenuTab ref="menuTab" @changeActive="changeActive" :commentCount="comment.total"></MenuTab>
    <div class="list_comment">
      <!-- 歌曲列表 -->
      <MusicList v-show="activeIndex === '1'" :songs="songsDetail.songs" :songListId="currentId"></MusicList>

      <!-- 歌曲评论 -->
      <Comment :hotLength="hotLength"  :comment="comment" v-show="activeIndex === '2'" @getCommentPage="getCommentPage" :currentId="currentId"></Comment>
    </div>
  </div>
</template>

<script>
import ListDetail from 'components/songListPage/ListDetail'
import MenuTab from 'components/songListPage/MenuTab'
import MusicList from 'components/songListPage/MusicList'
import Comment from 'components/songListPage/Comment'
import { mapGetters } from 'vuex'

import { getPlayListDetail, getComment, getMusicDetailList } from 'util/songListPage.js'
export default {
  name: '',
  components: {
    ListDetail,
    MenuTab,
    MusicList,
    Comment
  },
  data() {
    return {
      // 传入的id
      currentId: this.$route.params.id,
      // 歌单数据
      playList: {},
      // 导航页面
      activeIndex: '1',
      // 请求的歌曲id
      queryIds: '',
      // 歌曲数据
      songsDetail: {},
      // 评论数据
      comment: {},
      //作者信息
      creator: {},
      hotLength: 0
    }
  },
  computed: {
    ...mapGetters('musicPlay', [
      // 加载状态
      'isLoading'
    ])
  },
  created() {
    //   调用方法
    this.getPlayListDetail()
  },
  methods: {
    //获取歌单信息
    async getPlayListDetail() {
      this.$store.dispatch('musicPlay/changeIsLoading', true)
      let { data } = await getPlayListDetail(this.currentId)
      // console.log(data);
      this.playList = data.playlist
      this.creator = data.playlist.creator
      this.playList.trackIds.forEach(item => {
        this.queryIds += item.id + ','
      })

      this.getMusicDetailList()
      this.getCommentPage(0)
    },

    //获取评论信息
    async getCommentPage(page) {
      let res = await getComment(this.currentId, 20, page * 20)
        this.comment.comments = res.data.comments
      // console.log(res);
      if (page == 0) {
        this.comment = res.data
        this.hotLength = this.comment.hotComments.length
      } else {
        this.comment.comments = res.data.comments
      }
      //   console.log(res.data);
      this.$store.dispatch('musicPlay/changeIsLoading', false)
    },
    //获取歌曲列表信息
    async getMusicDetailList() {
      let { data } = await getMusicDetailList(this.queryIds.substr(0, this.queryIds.length - 1))
        // console.log(data);
      this.songsDetail = data
    },
    // 改变导航栏
    changeActive(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang='less' scoped>
</style>